<template>

	<div class="popupMask">
		<div class="popupPenal">
			<div class="popPenalTitle">
				<div class="popPenalTitleName">
					{{newOrEdit== true ?'添加':'编辑'}}实验室管理
				</div>
				<div class="popupClose ensure">

					<el-button  type="primary" size="mini" @click="addLaboratory('ruleForm')">保存</el-button>
				</div>
				<div class="popupClose" >
					<el-button size="mini" v-on:click="resetForm('ruleForm')">关闭</el-button>
				</div>
			</div>
			<div class="penalContent" style="padding:30px;">
				<el-form label-width="110px" :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">

						<el-form-item label="名称" prop="name">
							<el-col :span="22">
								<el-input  placeholder="名称" v-model='ruleForm.name'></el-input>

							</el-col>
						</el-form-item>
						<el-form-item label="标识" prop="ename">
							<el-col :span="22">
								<el-input  placeholder="仅限输入英文，下划线，数字" v-model='ruleForm.ename'></el-input>

							</el-col>
						</el-form-item>
						<el-form-item class="date" label="编号" prop="code" >
							<el-col :span="22">
								<el-input placeholder="编号" v-model='ruleForm.code' disabled></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="所属组织">
							<el-col :span="22">
								<el-select v-model="ruleForm.group" placeholder="请先选择组织" style="width: 100%;"  class="group" disabled>
									<el-option :key="groupData.code" :label="groupData.name" :value="groupData.code">
									</el-option>
								</el-select>
								<!--<el-cascader
								  :options="treedata"
								  @active-item-change="handleItemChange"
								  :props="props"
								></el-cascader>-->
							</el-col>
						</el-form-item>
						<el-form-item label="类型" prop="type">
							<el-col :span="22">
								<el-select v-model="ruleForm.type" placeholder="请选择" style="width: 100%;" multiple collapse-tags>
									<el-option v-for="item in leixingoptions"
										:key="item.value"
										:label="item.label"
										:value="item.value">
									</el-option>
								</el-select>

							</el-col>
						</el-form-item>
						<el-form-item label="负责人" prop="principal">
							<el-col :span="22">
								<el-input  placeholder="负责人" v-model='ruleForm.principal'></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="电话" prop="phone">
							<el-col :span="22">
								<el-input  placeholder="电话" v-model='ruleForm.phone'></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="单位域名" prop="domainName">
							<el-col :span="22">
								<el-input  placeholder="如:yzss" v-model='ruleForm.domainName' ></el-input>

							</el-col>
						</el-form-item>
						<el-form-item label="单位地址" prop="address">
							<el-col :span="22">
								<el-input  placeholder="单位地址" v-model='ruleForm.address'></el-input>

							</el-col>
						</el-form-item>
						<el-form-item label="数据库" prop="mark">
							<el-col :span="22">
								<el-select v-model="ruleForm.mark" placeholder="请选择" style="width: 100%;" :disabled = "!newOrEdit">
									<!--dataSourceName-->
									<el-option v-for="item in markValue"
										:key="item.id"
										:label="item.name"
										:value="item.id"
										>
									</el-option>
								</el-select>
							</el-col>
						</el-form-item>
						<el-form-item label="状态" prop="status">
							<el-col :span="22">
								<el-select v-model="ruleForm.status" placeholder="请选择" style="width: 100%;">
									<el-option v-for="item in zhuangtaioptions" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-col>
						</el-form-item>
					</el-form>

			</div>
			<div class="penalFooter" v-if="!newOrEdit">

				<p><span>创建人 : </span><span>{{ruleForm.createBy}}</span></p>
				<p><span>创建时间 :</span><span>{{ruleForm.createTime}}</span></p>

				<p v-if="ruleForm.updateBy != undefined "><span>修改人 : </span><span>{{ruleForm.updateBy}}</span></p>
				<p v-if="ruleForm.updateTime != undefined"><span>修改时间 : </span><span>{{ruleForm.updateTime}}</span></p>
			</div>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'

	export default {
		data() {
			return {
				newOrEdit:this.$parent.addLaboratory,
				groupData:this.$parent.groupData,
				result:'',
				treedata:this.$parent.treedata,
				 props: {
				  label: 'name',
		          value: 'code',
		          children: 'childs'
		       },
		       markValue:[],
				zhuangtaioptions: [
					{
						value: 0,
						label: '停用'
					},
					{
						value:1,
						label: '启用'
					},
				],
       		leixingoptions:[{
						value: "1",
						label: '原水'
					},
					{
						value: "2",
						label: '自来水'
					},
					{
						value: "3",
						label: '污水'
					},
       			],
       			driverType:[
       				{
						value:'mysql',
						label: 'mysql'
					},
					{
						value: 'oracle',
						label: 'oracle'
					},
       			],
       			ruleForm:{
       				code:'',
	       			name:'',
	       			group:this.$parent.experimentQuery.group,
	       			type:["1"],
	       			principal:'', //负责人
	       			phone:'',
	       			domainName:'',
	       			address:'',
	       			status:1,
	       			mark:'',
					ename:'',
       			},

       			rules: {	//表单验证的规则

					name:[
						{type: 'string',required: true,  message: '请填写名称', trigger: 'blur' },
					],

	       			// phone:[
					// 	{ validator:(rule, value, callback) => {
					// 		var reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
					//         if (value == ''||value == undefined) {
					//           	callback();
					//         } else if (!reg.test(value)) {
				    //     	 	callback(new Error('请填写正确电话'));
					//         } else {
				    //      	 	callback();
					//         }
					//       },trigger: 'blur', },
					// ],
					ename:[{ validator:(rule, value, callback) => {
						// debugger
						var reg = /^[_a-zA-Z0-9]+$/
						if (value == ''||value == undefined) {
							callback(new Error('请填写标识'));
						} else if (!reg.test(value)) {
							callback(new Error('请填写英文、下划线或者数字'));
						} else {
							callback();
						}
						},required: true, trigger: 'blur' },
					],

	       			mark:[
						{ required: true,message: '请选择数据库',trigger: 'change', },
					],
				},
			};
		},
		mounted(){
			this.getDbData()
			if(!this.$parent.addLaboratory){

				this.ruleForm = JSON.parse(JSON.stringify(this.$parent.ruleForm))
        // this.ruleForm.type = [1,2]
        // if(this.ruleForm.type.indexOf(',') != -1){
        //     this.ruleForm.type = [this.ruleForm.type]
        // }else{
            this.ruleForm.type  = this.ruleForm.type.split(',')
        // }
        console.log(this.ruleForm.type)

			}

		},
		methods: {
			changeDbPort(val){
				if(val == 'oracle'){
					this.ruleForm.dbPort = '1521'
				}else{
					this.ruleForm.dbPort = '3306'
				}
			},
			//添加实验室中数据库下拉框
			getDbData(){
				var data = {
					status:1,
				}
				this.$http({
					method: 'post',
					apiUrl: 'systemmanage/getDataSourceByStatus.htm',
					params: data,
					isJson:false
				}).then(res=>{
					if(res.code === 0){
						this.markValue = res.data;
					}
				})
			},
			addLaboratory(formName){
				this.$refs[formName].validate((valid) => {  //表单验证
					if (valid) {
						if(this.$parent.addLaboratory){
							var url = 'systemmanage/addLaboratory.htm';
							var data = {
								code:this.ruleForm.code,
				       			name:this.ruleForm.name,
				       			group:this.$parent.groupData.code,  //group为父节点的code
				       			type:this.ruleForm.type,
				       			principal:this.ruleForm.principal, //负责人
				       			phone:this.ruleForm.phone,
				       			domainName:this.ruleForm.domainName,
				       			address:this.ruleForm.address,
				       			status:this.ruleForm.status,
				       			mark:this.ruleForm.mark,
								ename:this.ruleForm.ename,
							};
						}else {
							var url = 'systemmanage/updateLaboratory.htm';
						    var data = {
						    	id:this.ruleForm.id,
						    	code:this.ruleForm.code,
				       			name:this.ruleForm.name,
				       			group:this.$parent.groupData.code,
				       			type:this.ruleForm.type,
				       			principal:this.ruleForm.principal, //负责人
				       			phone:this.ruleForm.phone,
				       			domainName:this.ruleForm.domainName,
				       			address:this.ruleForm.address,
				       			status:this.ruleForm.status,
				       			mark:this.ruleForm.mark,
								ename:this.ruleForm.ename,
						    }

						}
            data.type = data.type.join(',')
						this.$http({
							method: 'post',
							apiUrl: url,
							params: data,
							isJson:false,
						}).then(res=>{
							if(res.code == 0){
								this.$message({
									type: 'success',
									message: '提交成功!'
								});
								this.$parent.cmdfind(this.$parent.experimentQuery);
								this.resetForm('ruleForm')
							}

						})
					}else{
						return false;
					}
				});

			},

			resetForm(formName) {	//重置表单,关闭表单

				this.$refs[formName].resetFields();//重置表单
				this.ruleForm={
		      		code:'',
	       			name:'',
	       			group:this.$parent.experimentQuery.group,
	       			type:["1"],
	       			principal:'', //负责人
	       			phone:'',
	       			domainName:'',
	       			address:'',
	       			status:1,
	       			mark:'',
	       			createBy:'',
	       			createTime:'',
	       			updateBy:'',
	       			updateTime:'',

	      		},
				this.$parent.experimentShow = false;//关闭表单

			},

		}
	}
	$(function(){
		$(".group .el-input input").unbind('click')
	})
</script>

<style scoped>
.group .el-input.is-disabled .el-input__suffix{
	display: none !important;
}
.el-form .el-form-item{
	display:inline-block ;
	width: 50%;
	float: left;
}

</style>
